<template>
 <div @click="goMain">
   <a class="goIndex" v-if="showAdOnly!=1" to="/main">点击进入首页</a>
   <banner :lists="banners"/>
 </div>
</template>

<script>
import {reactive,toRefs,computed,onMounted,onBeforeUnmount} from 'vue'
import {useStore} from 'vuex'
import { useRoute,useRouter } from 'vue-router'
import banner from './components/banner.vue'
export default {
    components:{
      banner
    },
    setup(){
        const store = useStore()
        const route = useRoute()
        const router = useRouter()
        const state = reactive({
           carCode: '',
           banners:[],
           adData:[],
           stop:false,
           showAdOnly:''
        })

        onMounted(async ()=>{
            //const res = await store.dispatch('get_car_code')

            const cCode = route.query.carCode
            if(cCode){ // 如果URL上有小车编号，则优先读取小车编号，并存储再store中
              state.carCode = cCode
            }else{ 
              // 如果url上不存在小车编号，则从store中读取,store中不存在，则设为默认10001
              state.carCode = store.state.carCode || 10001  
            }
            store.commit('set_carCode',state.carCode)  // 设置小车编号
            

            getCarDetails()  // 获取小车信息

            store.dispatch('get_ad_list',{
              carCode:state.carCode
            }).then(res =>{
              state.adData = res.data
              getFilterData()
            })
        })

        onBeforeUnmount(()=>{  // 销毁组件
            state.stop = true
            console.log("关闭循环过滤数据")
        })

        const getCarDetails = ()=>{
          store.dispatch('get_car_detail',{
              carCode:state.carCode
          }).then(res =>{
              state.showAdOnly = res.data.showOnly
          })
        }

        const getFilterData = ()=>{ // 按时间段获取需要显示的广告图片
              if(state.stop){
                return
              }
              state.banners = []
              let arr = state.adData
              if(arr && arr.length>0){
                arr.forEach(item => {
                  if(filterAdForTime(item)){
                    state.banners.push(item)
                  }
                });
              }
              setTimeout(()=>{
                console.log("过滤广告图片...")
                getFilterData()
              },60000) // 一分钟执行一次
        }

        const filterAdForTime = item=>{
              const curDate = new Date()
              const year = curDate.getFullYear()
              const month = curDate.getMonth()+1
              const day = curDate.getDate()

              const start = `${year}-${month}-${day} ${item.beginTime}`
              const end = `${year}-${month}-${day} ${item.endTime}`

              // 根据时间戳比较大小
              const startTime = new Date(start).getTime()
              const endTime = new Date(end).getTime()
              const curtime = new Date().getTime()
              if(curtime>=startTime && curtime<=endTime){
                  return true
              }else{
                  return false
              }
        }

        const goMain = ()=>{
          if(state.showAdOnly!=1){
            router.push('/main')
          }  
        }

        return{
            ...toRefs(state),
            goMain
        }
    }
}
</script>

<style scoped lang="scss">
  .goIndex{
    position: fixed;
    z-index: 1001;
    width: 154px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    font-weight: bold;
    right: 0;
    top: 100px;
    background: #515151;
    color: #fff;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    padding: 0 0 0 20px;
    &:hover{
      background: #858282;
      color: #ece8e8;
      cursor: pointer;
    }
  }
</style>